<template>
  <div class="userEquipment">
    <MetaSearchForm @on-search="tableSearch">
      <el-form ref="userEquipment_form" :model="searchData" label-width="90px">
        <el-form-item label="设备名称" class="userEquipment_formItem">
          <el-input
            v-model="searchData.equipmentname"
            placeholder="请输入设备名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="自定义名称" class="userEquipment_formItem">
          <el-input
            v-model="searchData.customizeName"
            placeholder="请输入设备名称"
            clearable
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="设备状态" class="userEquipment_formItem">
          <el-select v-model="searchData.on_type" placeholder="请选择设备类型" clearable>
            <el-option
              v-for="item in equTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item> -->
      </el-form>
    </MetaSearchForm>
    <MetaPageTable
      ref="userEquipmentTable"
      class="userEquipment_table"
      table-title="设备管理"
      :need-checkbox="false"
      :is-auto-req="false"
      :display-item="displayItem"
      :table-data="equTableData"
      :btn-group="btnGroup"
      @btnClick="tableBtnClick"
      :line-btn-group="lineBtnGroup"
      @lineBtnClick="tableInlineBtnClick"
    />
    <el-dialog
      v-if="customizeNameDialogFlag"
      title="自定义名称"
      :visible.sync="customizeNameDialogFlag"
      width="40%"
      modal
      center
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="editDialogClose"
    >
      <el-form ref="itemEditData" label-width="120px" :model="customizeInfo">
        <el-form-item label="自定义名称">
          <el-input v-model="customizeInfo.customizeName"></el-input>
        </el-form-item>
      </el-form>
      <div class="dialogFooter">
        <el-button size="mini" @click="editDialogClose()">取消</el-button>
        <el-button type="primary" size="mini" @click="dataDialogSubmit()">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import MetaPageTable from "../components/MetaPageTable";
import MetaSearchForm from "../components/MetaSearchForm";
import deepClone from "../utils/deepClone";
export default {
  name: "userEquipment",
  components: {
    MetaPageTable,
    MetaSearchForm,
  },
  data() {
    return {
      customizeNameDialogFlag: false,
      customizeInfo: {
        customizeName: "",
      },
      searchData: {
        equipmentname: "",
        on_type: "",
        customizeName: "",
      },
      equTableData: {},
      searchDataForTable: {},
      displayItem: [
        {
          label: "设备序列号",
          prop: "sernumber",
        },
        {
          label: "自定义名称",
          prop: "customizeName",
        },
        {
          label: "设备名称",
          prop: "equipmentname",
        },
        {
          label: "设备类型",
          prop: "equipment_type",
          type: "if",
          format: {
            1: "浮标式设备",
            2: "便携式设备",
            3: "岸基式设备",
            4: "管道式设备",
            5: "潜入式设备",
          },
        },
        {
          label: "设备版本",
          prop: "version",
        },
        {
          label: "设备所在地",
          prop: "addr",
        },
        {
          label: "设备位置（纬度）",
          prop: "latitude",
        },
        {
          label: "设备位置（经度）",
          prop: "longitude",
        },
        {
          label: "围栏半径",
          prop: "radius",
        },
        {
          label: "状态",
          prop: "on_type",
          type: "if",
          format: {
            0: "调试",
            1: "在线",
            2: "调试",
            3: "维修",
            4: "报警",
            5: "休眠"
          },
          color: {
            0: "#00A8FF",
            1: "#00E436",
            2: "#00A8FF",
            3: "#FFA11A",
            4: "#FF501A",
            5: "#00E436",
          },
        },
      ],
      equTypeList: [
        {
          value: 1,
          label: "在线",
        },
        {
          value: 2,
          label: "调试",
        },
        {
          value: 3,
          label: "维修",
        },
        {
          value: 4,
          label: "报警",
        },
      ],
      lineBtnGroup: [
        {
          id: "edit",
          title: "自定义名称",
        },
      ],
      btnGroup: [{ id: "export", title: "设备导出" }],
    };
  },
  created() {},
  mounted() {
    this.initTableData(true);
  },
  methods: {
    initTableData(reflash) {
      let params = {};
      params = this.searchDataForTable;
      params.page = 1;
      params.limit = 9999999;
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + "admin/equipment/user",
        method: "post",
        data: params,
      }).then((res) => {
        if (res.data.code === 200) {
          this.equTableData = {};
          this.equTableData.page = 1;
          this.equTableData.totalElements = res.data.result.length;
          this.equTableData.content = res.data.result;
          for (let i in this.equTableData.content) {
            let addr =
              this.equTableData.content[i].provincename +
              " " +
              this.equTableData.content[i].cityname +
              " " +
              this.equTableData.content[i].areaidname;
            this.equTableData.content[i].addr = addr;
          }
          this.$nextTick(() => {
            this.$refs.userEquipmentTable.formDataInit(reflash);
          });
        } else {
          this.$notify.error({
            title: "错误",
            message: res.data.message,
          });
        }
      });
    },
    tableSearch() {
      this.searchDataForTable = deepClone(this.searchData);
      this.initTableData(true);
    },
    tableInlineBtnClick(item) {
      if (item.button === "edit") {
        this.customizeInfo = deepClone(item.rows);
        this.customizeNameDialogFlag = true;
      }
    },
    tableBtnClick(item) {
      if (item.button === "export") {
        let params = {};
        params.on_type = "";
        params.equipmentname = this.searchData.equipmentname;
        params.customizeName = "";
        params.page = 1;
        params.limit = 9999;
        let token = localStorage.getItem("token");
        this.axios({
          method: "post",
          url: process.env.PROGOO_GATE_WATER + "admin/equipment/equipmentListOfUserExport",
          data: params,
          // token
          headers: {
            "x-auth-token": token,
          },
          responseType: "blob",
        }).then((res) => {
          if ((res.code && res.code == 400) || (res.data.code && res.data.code == 400)) {
            this.$notify.error({
              title: "错误",
              message: res.data.message,
            });
            return;
          }
          const url = window.URL.createObjectURL(new Blob([res.data]));
          const link = document.createElement("a");
          link.style.display = "none";
          link.href = url;
          link.setAttribute("download", "用户设备列表.xlsx");
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        });
      }
    },
    dataDialogSubmit() {
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + "admin/equipment/customize",
        method: "post",
        data: {
          equipmentId: this.customizeInfo.id,
          username: localStorage.getItem("username"),
          customizeName: this.customizeInfo.customizeName.trim()
        },
      }).then((res) => {
        if (res.data.code === 200) {
          this.$notify.success({
            title: "编辑成功",
            message: res.data.message,
          });
          this.initTableData(false);
          this.editDialogClose();
        } else {
          this.$notify.error({
            title: "错误",
            message: res.data.message,
          });
        }
      });
    },
    editDialogClose() {
      this.customizeNameDialogFlag = false;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
.userEquipment {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 15px;
  overflow-y: scroll;
  .userEquipment_formItem {
    float: left;
  }
  .userEquipment_table {
    width: 100%;
    overflow-y: unset;
  }
  .equipTypeSelect {
    width: 100%;
  }
  .dialogFooter {
    display: flex;
    justify-content: center;
    margin-top: 0.5rem;
  }
}
</style>
